<!-- TabBar 文章资讯 -->
<template>
	<view>
		<cu-custom bgColor="bg-gradual-them" :isBack="false">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">日常记录</block>
		</cu-custom>


		<!-- 时间筛选-黏性按钮 -->
		<view class="stickiness-time-select-label" @click="selectTime">
			<view class="button-back-icon tn-icon-time-fill">
			</view>
			<view class="button-back">
				时间筛选
			</view>
		</view>

		<!-- 时间选择器 -->
		<u-picker mode="multiSelector" v-model="selectTimeShow" :default-selector='[0, 0]' :range="multiSelector"
			@confirm="selectTimeConfirm"></u-picker>



		<!-- 返回顶部-黏性按钮 -->
		<view class="back-to-top" v-show="scrollTop > 300" @click="scrollToTop">
			<view class="button-back-icon tn-icon-up-fill">
			</view>
			<view class="button-back">
				回到顶部
			</view>
		</view>


		<scroll-view scroll-x class="bg-white nav" enable-flex style="justify-content: space-around;"
			scroll-with-animation :scroll-left="scrollLeft">
			<view>
				<view class="cu-item" style="justify-content: space-around !important; width: 50%;text-align: center;"
					:class="index == TabCur?'text-them cur':''" v-for="(item,index) in navTop" :key="index"
					@tap="tabSelect" :data-id="index">
					{{item.title}}
				</view>
			</view>
		</scroll-view>



		<!-- 全部日常 -->
		<view v-show="TabCur === 0 && item.dailyId !==0" class="cu-list menu-avatar comment solids-top cat-menu"
			v-for="(item, id) in allLifes" :key="id">

			<view class="cu-item">

				<!-- 用户头像 -->
				<image :src="item.avatar" mode="aspectFill" class="cu-avatar cat-head" @click="goLifes(item.catId)">
				</image>

				<!-- 用户姓名 -->
				<view class="content">
					<view style="padding-top: 7rpx;" class="text-grey mystyle_1" @click="goLifes(item.catId)">
						<view>
							{{item.nickname}}
						</view>
						<view>
							<u-icon name="more-dot-fill"></u-icon>
						</view>
					</view>


					<view style="padding-top: 10rpx;" class="" @click="goLifes(item.catId)">
						{{item.catText}}
					</view>

					<!-- 图片 -->
					<view class="text-sm" style="background-color: #fcfcfc;margin-top: 10rpx;">
						<view class="flex">
							<view style="padding-left: 10rpx; z-index: 1000;"
								v-show="item.catImg1 != '' && item.catImg1 != null && item.catImg1 != undefined">
								<u-image @click="clickImgAll(0,item.catImg1,item.catImg2,item.catImg3)"
									:src="item.catImg1" :lazy-load="true" shape="square" width="160rpx" height="160rpx"
									:fade="true" duration="450" mode="aspectFill">
									<view slot="error" style="font-size: 15rpx;">加载失败</view>
								</u-image>
							</view>

							<view style="padding-left: 10rpx;"
								v-show="item.catImg2 != '' && item.catImg2 != null && item.catImg2 != undefined">
								<u-image @click="clickImgAll(1,item.catImg1,item.catImg2,item.catImg3)"
									:src="item.catImg2" :lazy-load="true" shape="square" width="160rpx" height="160rpx"
									:fade="true" duration="450" mode="aspectFill">
									<view slot="error" style="font-size: 15rpx;">加载失败</view>
								</u-image>
							</view>

							<view style="padding-left: 10rpx;"
								v-show="item.catImg3 != '' && item.catImg3 != null && item.catImg3 != undefined">
								<u-image @click="clickImgAll(2,item.catImg1,item.catImg2,item.catImg3)"
									:src="item.catImg3" :lazy-load="true" shape="square" width="160rpx" height="160rpx"
									:fade="true" duration="450" mode="aspectFill">
									<view slot="error" style="font-size: 15rpx;">加载失败</view>
								</u-image>
							</view>

						</view>
					</view>
					<!-- 日期数 -->
					<view class="margin-top-sm flex justify-between">
						<view class="text-gray text-df cuIcon-time">{{item.createTime}}</view>

						<!-- 点赞数 -->
						<view>
							<view v-if="item.remark === 0" @click="userLiks(id)">
								<u-icon name="heart" color="#bdbeba" size="28"></u-icon>
								<text class="text-gray">{{item.catLikes}}</text>
							</view>
							<!-- <u-icon name="heart-fill" color="#fa3534" size="28"></u-icon> -->
							<!-- <text class="cuIcon-appreciatefill text-gray">{{item.like}}</text> -->

							<view v-else>
								<u-icon name="heart-fill" color="#fa3534" size="28"></u-icon>
								<text class="text-red">{{item.catLikes}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>


		</view>





		<!-- 分享精选    右边-->
		<view v-show="TabCur === 1" class="cu-list menu-avatar comment">


			<!-- 瀑布流 -->
			<view class="wrap" style="margin-top: -15rpx;">
				<!-- <u-button @click="clear">清空列表</u-button> -->
				<u-waterfall v-model="flowList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
							<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<u-lazy-load @click="clickImg(item.catImg1)" threshold="-450" border-radius="10"
								:image="item.catImg1" :index="index">
							</u-lazy-load>

							<!-- 分享话语 -->
							<view class="demo-title" @click="goLifes(item.catId)">
								{{item.catText}}
							</view>

							<view class="mystyle_1" @click="goLifes(item.catId)">


								<view class="mystyle_2">

									<!-- 作者 -->
									<view class="demo-by">
										<u-icon name="account" color="#aaaaa9" size="28"></u-icon>
										{{' '}}{{item.nickname}}
									</view>

									<!-- 日期 -->
									<view class="demo-by">
										<u-icon name="clock" color="#aaaaa9" size="28"></u-icon>
										{{' '}}{{item.createTime}}
									</view>
								</view>



								<!-- 0为没有点赞 -->
								<view class="demo-dislike" v-show="item.remark === 0">
									<u-icon name="heart" color="#bdbeba" size="40"></u-icon>
									{{item.catLikes}}
								</view>

								<!-- 1为 点赞 -->
								<view class="demo-like" v-show="item.remark === 1">
									<u-icon name="heart-fill" color="#fa3534" size="40"></u-icon>
									{{item.catLikes}}
								</view>

							</view>


							<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
							<u-lazy-load @click="clickImg(item.catImg1)" threshold="-450" border-radius="10"
								:image="item.catImg1" :index="index">
							</u-lazy-load>
							<view class="demo-title" @click="goLifes(item.catId)">
								{{item.catText}}
							</view>

							<view class="mystyle_1" @click="goLifes(item.catId)">

								<view class="mystyle_2">
									<view class="demo-by">
										<u-icon name="account" color="#aaaaa9" size="28"></u-icon>
										{{' '}}{{item.nickname}}
									</view>
									<view class="demo-by">
										<u-icon name="clock" color="#aaaaa9" size="28"></u-icon>
										{{' '}}{{item.createTime}}
									</view>
								</view>


								<!-- 0为没有点赞 -->
								<view class="demo-dislike" v-show="item.remark === 0">
									<u-icon name="heart" color="#bdbeba" size="40"></u-icon>
									{{item.catLikes}}
								</view>

								<!-- 1为 点赞 -->
								<view class="demo-like" v-show="item.remark === 1">
									<u-icon name="heart-fill" color="#fa3534" size="40"></u-icon>
									{{item.catLikes}}
								</view>
							</view>


							<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
						</view>
					</template>
				</u-waterfall>
				<!-- <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore> -->
			</view>


		</view>



		<!-- 底部到底提升 -->
		<u-toast ref="uToast" />


		<view style="height: 140rpx;width: 1rpx;"></view>

	</view>


</template>

<script>
	import {
		getToken
	} from '@/utils/auth';
	import request from '@/common/request.js';

	export default {
		components: {},

		props: {
			pageNum: Number, // 下拉页数
			scrollTop: Number, // 滚动高度
		},

		data() {
			return {
				selectTimeShow: false, // 时间选择器——是否显示
				// 时间数据
				multiSelector: [
					['2022年', '2023年', '2024年', '2025年', '2026年', '2027年', ],
					['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', ]
				],
				// 时间查询flag
				timeSeletFlag: 0,   // 1为时间，0为默认

				TabCur: 0,   // 顶部选择栏
				scrollLeft: 0,
				navTop: [{
						id: 1,
						title: '全部日常'
					},
					{
						id: 2,
						title: '分享精选'
					},
				],
				
				// 左边数据
				allLifes: [{

					// openid:

					catId: 0, // 猫咪id

					avatar: 'https://img-blog.csdnimg.cn/3d43fe923d074f42bed49242265da5be.jpg', //分享人 头像

					nickname: '热心猫友',

					catText: '今日喂猫分享，大白好可爱！', // 分享日常

					catImg1: 'https://img-blog.csdnimg.cn/20210826141951774.jpg', // 照片
					catImg2: 'https://img-blog.csdnimg.cn/20210826141951774.jpg', // 照片
					catImg3: 'https://img-blog.csdnimg.cn/20210826141951774.jpg', // 照片

					createTime: '2022年11月5日', // 日期

					catLikes: 70, // 喜欢数

					remark: 0, // 获取数据的时候需要判断

					dailyId: 0,
				}, ],


				// 瀑布流数据
				loadStatus: 'loadmore',
				flowList: [

				],
				list: [{
					catId: 0, // 猫咪id

					catText: '妹妹今年1岁了', // 评语
					catImg1: 'https://img-blog.csdnimg.cn/20190611172209268.png', // 上传照片

					nickname: '哇哈哈', // 编辑人
					catLikes: 35, // 喜欢数 

					remark: 0, // 获取数据的时候需要判断

					createTime: '2022-11-06', // 日期

					dailyId: 0,
				}],



				viewId: 2,

				// 分页数据  【左边分页数据查询】
				leftNum: 0,

				// 分页数据  【右边分页数据查询】
				rightNum: 0,

				// 是否到底    左边 
				leftBottom: 0,

				// 是否到底    右边
				rgihtBottom: 0,

				isRightFlag: 0, // 让右边第一次加载

				form: {
					openid: '',

					pageNum: 0,
					pageSize: 5,
					isLoad: 0, // 左边
				}

			};
		},

		watch: {

			// 下拉刷新执行方法
			pageNum(newVal, oldVal) {
				// 如果是时间查询，就不执行
				if (this.timeSeletFlag === 1){
					return
				}
				
				console.log("下拉刷新-被执行了")

				// 如果在左
				if (this.TabCur === 0) {
					// 判断是否到底了
					if (this.leftBottom === 1) {
						console.log("到底了，不刷新 ")
						//弹窗
						//提示发送 到底了，不刷新
						this.$refs.uToast.show({
							title: '已经到底啦！喵~',
							type: 'warning',
							url: ''
						})
						return
					}

					// 获取分页信息  【左边】
					this.leftMsg()
				}

				//如果在右
				if (this.TabCur === 1) {
					// 判断是否到底了
					if (this.rgihtBottom === 1) {
						console.log("到底了，不刷新 ")
						//弹窗
						//提示发送 到底了，不刷新
						this.$refs.uToast.show({
							title: '已经到底啦！喵~',
							type: 'warning',
							url: ''
						})
						return
					}


					this.rightMsg(); // 加载右边信息

				}
			}
		},



		onReady() {
			this.getOpenid(); // 获取用户openid

			// this.addRandomData();   // 右边瀑布流加载

			this.leftMsg(); // 加载左边信息

		},



		methods: {
			// 时间查询——确认（发起请求
			selectTimeConfirm(value) {
				
				const year = parseInt(value[0]) + 2022; // 计算年份
				const month = parseInt(value[1]) + 1; // 计算月份
				console.log('确认选择:', year,month, )
				// 清空查询数据
				this.$refs.uWaterfall.clear()
				this.flowList = []
				this.allLifes = []

				
				// flag变为1
				this.timeSeletFlag = 1
				
				// 装填信息
				let timeForm = {}
				timeForm.year =year // year
				timeForm.month = month // month
				console.log(timeForm)
				// 发起请求（传入时间)
				this.$u.api.loadSelectTimeDaily(timeForm).then(res => {
					console.log("时间查询-res: ", res)
					// 如果没有查询到
					if (res.length === 0) {
						this.$refs.uToast.show({
							title: '该时间段没有记录哟😽ฅ•̀∀•́ฅ😽',
							type: 'warning',
							url: ''
						})
						return
					}

					// TODO数据填充
					this.allLifes = [...this.allLifes, ...res.map(item => {
				
						// id
						item.dailyId = item.id
				
						// 图片加工
						if (item.catImg1 != "") {
							item.catImg1 = this.myimgurl() + item.catImg1
						}
						if (item.catImg2 != "") {
							item.catImg2 = this.myimgurl() + item.catImg2
						}
						if (item.catImg3 != "") {
							item.catImg3 = this.myimgurl() + item.catImg3
						}
				
						// 时间加工
						item.createTime = item.createTime.split(" ")
						item.createTime = item.createTime[0]
						item.createTime = item.createTime.split("-")
						item.createTime = item.createTime[0] + "年" + item.createTime[1] + "月" + item
							.createTime[2] + "日"
				
						// 点赞判断
						if (item.remark == "已点赞") {
							item.remark = 1
						} else {
							item.remark = 0
						}
						return item
				
					})]
					
					// TODO数据填充
					this.flowList = [...this.flowList, ...res.map(item => {
					
						// id
						item.dailyId = item.id
					
						// 图片加工
						if (item.catImg1 != "") {
							item.catImg1 = item.catImg1
						}

						return item
					
					})]
				
				});
				
			},


			// 时间选择——弹窗
			selectTime() {
				this.selectTimeShow = true
			},


			// 回到顶部
			scrollToTop() {
				uni.pageScrollTo({ // 使用uni-app提供的pageScrollTo方法实现平滑滚动回到顶部
					scrollTop: 0,
					duration: 300,
				});
			},

			// 点赞方法  【右边】
			rightLikes(index, flag) {

				// 左边
				if (flag == 0) {
					index = index + index
				}
				// 右边
				if (flag == 1) {
					index = index + index + 1
				}
				console.log(index)

				// 判断用户是否登陆
				if (this.form.openid == "") {
					this.$refs.uToast.show({
						title: '请先登陆哟 ❤',
						type: 'warning',
						url: ''
					})
					return
				}

				// 更改评论likes属性
				this.flowList[index].remark = 1
				this.flowList[index].catLikes += 1

				console.log("xxx:", this.flowList[index].catLikes)

				// 装填信息
				let aLikes = {}
				aLikes.dailyId = this.flowList[index].dailyId // 评论id
				aLikes.openid = this.form.openid // openid

			},

			// 点赞方法  【左边】
			userLiks(index) {
				console.log(index)

				// 判断用户是否登陆
				if (this.form.openid == "") {
					this.$refs.uToast.show({
						title: '请先登陆哟 ❤',
						type: 'warning',
						url: ''
					})
					return
				}
				// 更改评论likes属性
				this.allLifes[index].remark = 1
				this.allLifes[index].catLikes += 1

				// 装填信息
				let aLikes = {}
				aLikes.dailyId = this.allLifes[index].dailyId // 评论id
				aLikes.openid = this.form.openid // openid

				// 发送信息
				// this.request('userLikes', , 'POST').then(res=>{
				this.$u.api.userLikes(aLikes).then(res => {

					// 
					if (res.code != 200) {
						this.$refs.uToast.show({
							title: '系统繁忙！喵~',
							type: 'warning',
							url: ''
						})

						this.allLifes[index].remark = 0
						this.allLifes[index].catLikes -= 1
					}

					console.log("点赞情况：", res)

				})

			},

			// 获取用户openid
			getOpenid() {
				let openid = getToken();
				if (openid) {
					this.form.openid = openid
				}
			},

			// 3张点击图片放大预览
			clickImgAll(index, img1, img2, img3) {
				let imgList
				if (img2 === "") {
					imgList = [img1]
				} else if (img3 === "") {
					imgList = [img1, img2]
				} else {
					imgList = [img1, img2, img3]
				}

				wx.previewImage({
					urls: imgList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: imgList[index], // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

			// 单个点击图片放大预览
			clickImg(img) {
				wx.previewImage({
					urls: [img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: img, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},


			// 获取分页信息  【右边】
			rightMsg() {
				this.form.pageNum = this.rightNum
				this.form.isLoad = 1 // 右边

				// this.request('loadDaily', this.form, 'POST').then(res=>{
				this.$u.api.loadDaily(this.form).then(res => {

					console.log("右边数据-flowList: ", res)
					if (res.data.length < this.form.pageSize) {
						this.rgihtBottom = 1 // 到底了
						console.log("到底了----")
						//提示发送 到底了，不刷新
						this.$refs.uToast.show({
							title: '已经到底啦！喵~',
							type: 'warning',
							url: ''
						})
					}
					// 页数+1
					this.rightNum++

					// TODO数据填充 
					this.flowList = [...this.flowList, ...res.data.map(item => {

						// id
						item.dailyId = item.id

						// 图片加工
						if (item.catImg1 != "") {
							item.catImg1 = this.myimgurl() + item.catImg1
						}

						// 时间加工
						item.createTime = item.createTime.split(" ")
						item.createTime = item.createTime[0]
						item.createTime = item.createTime.split("-")
						item.createTime = item.createTime[0] + "年" + item.createTime[1] + "月" + item
							.createTime[2] + "日"

						// 点赞判断
						if (item.remark == "已点赞") {
							item.remark = 1
						} else {
							item.remark = 0
						}
						return item

					})]


				});



			},

			// 获取分页信息  【左边】
			leftMsg() {

				this.form.pageNum = this.leftNum
				this.form.isLoad = 0 // 左边
				// this.request('loadDaily', this.form, 'POST').then(res=>{
				this.$u.api.loadDaily(this.form).then(res => {
					console.log("左边数据-this.allLifes: ", this.allLifes)

					if (res.data.length < this.form.pageSize) {
						this.leftBottom = 1 // 到底了
						console.log("到底了----")
						//提示发送 到底了，不刷新
						this.$refs.uToast.show({
							title: '已经到底啦！喵~',
							type: 'warning',
							url: ''
						})
					}
					// TODO数据填充
					this.allLifes = [...this.allLifes, ...res.data.map(item => {

						// id
						item.dailyId = item.id

						// 图片加工
						if (item.catImg1 != "") {
							item.catImg1 = this.myimgurl() + item.catImg1
						}
						if (item.catImg2 != "") {
							item.catImg2 = this.myimgurl() + item.catImg2
						}
						if (item.catImg3 != "") {
							item.catImg3 = this.myimgurl() + item.catImg3
						}

						// 时间加工
						item.createTime = item.createTime.split(" ")
						item.createTime = item.createTime[0]
						item.createTime = item.createTime.split("-")
						item.createTime = item.createTime[0] + "年" + item.createTime[1] + "月" + item
							.createTime[2] + "日"

						// 点赞判断
						if (item.remark == "已点赞") {
							item.remark = 1
						} else {
							item.remark = 0
						}
						return item

					})]

					// 页数+1
					this.leftNum++



					
				});

				if (this.isRightFlag === 0) {

					this.isRightFlag++
					this.rightMsg()
				}

			},



			// 全屏分页
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60

				console.log('this.TabCur', this.TabCur)
			},

			// 查看详情
			goLifes(id) {
				uni.navigateTo({
					url: '/subPages/catLife/catlife?id=' + id,
				})
			}
		}
	}
</script>


<style>
	page {
		background-color: #edfdff;
	}
</style>

<style lang="scss" scoped>
	/* 内容布局 start*/
	.cat-menu {
		background-color: rgba(255, 255, 255, 1);
		width: 90%;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 15rpx !important;
		margin: auto;
		margin-top: 35rpx;
	}


	.borderBottom {
		border-bottom: 1px solid #f2f2f2;
	}

	.cat-head {
		border-radius: 50%;
		width: 70rpx;
		height: 70rpx;
	}


	// 瀑布流
	.demo-warter {
		border-radius: 8px;
		margin: 10px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-like {
		font-size: 40rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-dislike {
		font-size: 40rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.demo-by {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.mystyle_1 {
		position: relative;
		display: flex;
		// padding: 0 30upx;
		// min-height: 100upx;
		background-color: #ffffff;
		justify-content: space-between;
		align-items: center;
	}

	.mystyle_2 {
		position: relative;
		// display: flex;
		// padding: 0 30upx;
		// min-height: 100upx;
		background-color: #ffffff;
		flex-direction: column;
		align-items: center;
	}


	// 黏性顶部标签
	.button-back-icon {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		color: #fff;
		font-size: 28rpx;
		height: 30%;
		padding: 0;
	}

	.button-back {

		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		color: #fff;
		font-size: 28rpx;
		height: 70%;
	}

	.back-to-top {
		position: fixed;
		right: 0rpx;
		bottom: 150rpx;

		padding: 15rpx 20rpx;
		background: linear-gradient(-120deg, #00ebeb, #4782df);

		color: #fff;
		border-radius: 20rpx 0 0 20rpx;

		font-size: 28rpx;
		line-height: 1;
		z-index: 9999;

		height: 170rpx;
		width: 50rpx;

	}

	// 时间筛选黏性标签
	.stickiness-time-select-label {
		position: fixed;
		right: 0rpx;
		bottom: 400rpx;

		padding: 15rpx 20rpx;
		background: linear-gradient(-120deg, #5ce115, #52c812);

		color: #fff;
		border-radius: 20rpx 0 0 20rpx;

		font-size: 28rpx;
		line-height: 1;
		z-index: 9999;

		height: 170rpx;
		width: 50rpx;
	}
</style>
